/**
* Created by cql-cql-cql on 2017/3/20 0020.
*/
<template>
    <div class="slide">
        <a href="javascript:;" id="weChat"></a>
        <a href="javascript:;" id="comment"></a>
        <a href="javascript:;" id="info"></a>
        <a href="javascript:;" id="goLink"></a>
    </div>

</template>
<script>
    export default{
        data(){
            return {}
        },
        mounted(){
            var goLink = document.getElementById("goLink");
            var info = document.getElementById("info");
            window.onscroll = computedDisplay;
            function computedDisplay() {
                var curTop = document.documentElement.scrollTop || document.body.scrollTop;
                var curHeight = document.documentElement.clientHeight || document.body.clientHeight;
                goLink.style.display = curTop > curHeight ? "block" : "none";
            }

            goLink.onclick = function () {
                //->当点击的时候让当前的GO消失
                this.style.display = "none";
                window.onscroll = null;

                var duration = 300, interval = 10, target = document.documentElement.scrollTop || document.body.scrollTop;
                var step = (target / duration) * interval;
                var timer = window.setInterval(function () {
                    var curTop = document.documentElement.scrollTop || document.body.scrollTop;
                    if (curTop === 0) {
                        window.clearInterval(timer);
                        window.onscroll = computedDisplay;
                        return;
                    }
                    curTop -= step;
                    document.documentElement.scrollTop = curTop;
                    document.body.scrollTop = curTop;
                }, interval);
            }
            info.onmouseover = function () {
                this
            }
        }

    }
</script>

<style scoped>
    .slide #weChat {
        position: fixed;
        bottom: 200px;
        right: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        opacity: 0.7;
        filter: alpha(opacity=70);
        background: transparent url("../../assets/images/elevator.png") no-repeat 0px -860px;
    }

    .slide #weChat:hover {
        background-position: 0px -922px;
    }

    .slide #comment {
        position: fixed;
        bottom: 150px;
        right: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        opacity: 0.7;
        filter: alpha(opacity=70);
        background: transparent url("../../assets/images/elevator.png") no-repeat 0px -426px;
    }

    .slide #comment:hover {
        background-position: 0px -488px;
    }

    .slide #info {
        position: fixed;
        bottom: 100px;
        right: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        opacity: 0.7;
        filter: alpha(opacity=70);
        background: transparent url("../../assets/images/elevator.png") no-repeat 0px -550px;
    }

    .slide #info:hover {
        background-position: 0px -612px;
    }

    .slide #goLink {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        opacity: 0.7;
        filter: alpha(opacity=70);
        background: transparent url("../../assets/images/elevator.png") no-repeat 0px -674px;
    }

    /* .slide #info::after{
         content: '';
         width: 166px;
         height: 200px;
         background: transparent url("../../assets/images/elevator.png") no-repeat scroll -2px -218px;
         position: absolute;
         left: -170px;
         top: -20px;
         display: block;
     }*/

    #goLink:hover {
        opacity: 1;
        filter: alpha(opacity=100);
        background-position: 0px -736px;
    }
</style>

